<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js" ></script>
</head>
<body>
<div id="app">

    <button v-on:click="btnClick">事件监听</button>
    <button @click="btnClick">事件监听</button>
    <button @click="sayHello('Hello vue!')">事件监听</button>

    <div v-on:click="sayHello('我是DIV')">
        我是DIV
        <button v-on:click.stop="sayHello('我是Button')">我是BUTTON</button>
    </div>

    <form action="http://baidu.com">
        <button type="submit" @click.prevent="onSubmit" >提交</button>
    </form>

    <div  v-on:click.capture="sayHello('我是DIV')">我是DIV
        <button v-on:click="sayHello('我是Button')">我是Button</button>
    </div>

    <div  v-on:click.self="sayHello('我是DIV')">我是DIV
        <button v-on:click="sayHello('我是Button')">我是Button</button>
    </div>

    <button v-on:click.once="sayHello('我是Button')">我是Button</button>

    <pre>
        .stop 阻止事件的冒泡
        .prevent 阻止默认行为
        .capture 事件捕获
        .self 事件源是否是自己
        .once 仅仅执行一次

    </pre>


    <br>

    <input v-on:keyup.enter="changeMessage" placeholder="请输入内容" > {{message}}
    <pre>
        按键修饰符
        .enter
        .tab
        .delete
        .esc
        .space
        .up
        .down
        .left
        .right
        .middle
        .ctrl
        .alt
        .shift
        .meta


    </pre>


</div>
<script>
    const  vm = new Vue(
        {
            el:"#app",
            data:{
                message:''
            },methods:{
                btnClick:function () {
                    console.log("Btn Click")
                }
                ,
                sayHello:function (msg) {
                        alert(msg)
                },
                onSubmit:function () {
                    alert('表单提交')
                },
                changeMessage:function (event) {
                    this.message = event.target.value;
                }
            }
        }
    )

</script>


</body>
</html>